class Swiper {
    constructor() {
        this.box = document.querySelector("#banner")
        this.nextBtn = document.querySelector(".nextbtn")
        this.lastBtn = document.querySelector(".lastbtn")
        this.oLis = document.querySelectorAll(".bannerimgwrap img")
        this.pageNum = 0
        this.nextBtnEvent()
        this.lastBtnEvent()
        this.cLiEvent()
        this.autoplay()
    }
    cLiEvent1() {
        let clis = document.querySelectorAll(".imgmenu span")
        clis.forEach(v => v.classList.remove("active"))
        clis[this.pageNum].classList.add("active")
    }
    nextBtnEvent() {
        this.nextBtn.onclick = () => {
            this.nextpic()
        }
    }
    lastBtnEvent() {
        this.lastBtn.onclick = () => {
            animate(this.oLis[this.pageNum], {
                opacity: 0,
            });
            this.pageNum--
            if (this.pageNum == -1) {
                this.pageNum = 6
            }
            animate(this.oLis[this.pageNum], {
                opacity: 1,
            });
            this.cLiEvent1()
        }
    }
    nextpic() {
        animate(this.oLis[this.pageNum], {
            opacity: 0,
        });
        this.pageNum++
        if (this.pageNum == 7) {
            this.pageNum = 0
        }
        animate(this.oLis[this.pageNum], {
            opacity: 1,
        });
        this.oLis.forEach(v => v.classList.remove("active"))
        this.oLis[this.pageNum].classList.add("active")
        this.cLiEvent1()
    }
    cLiEvent() {
        let clis = document.querySelectorAll(".imgmenu span")
        for (let i = 0; i < clis.length; i++) {
            clis[i].onclick = () => {
                animate(this.oLis[this.pageNum], {
                    opacity: 0,
                });
                this.pageNum = i
                if (this.pageNum == 7) {
                    this.pageNum = 0
                }
                animate(this.oLis[this.pageNum], {
                    opacity: 1,
                });
                this.oLis.forEach(v => v.classList.remove("active"))
                this.oLis[this.pageNum].classList.add("active")
                this.cLiEvent1()
            }
        }
    }
    autoplay() {
        let timer = setInterval(() => {
            this.nextpic()
        }, 5000)
        this.box.onmouseenter = () => {
            clearInterval(timer)
        }
        this.box.onmouseleave = () => {
            timer = setInterval(() => {
                this.nextpic()
            }, 5000)
        }
    }
}